<div class="dashboard-list">
  <div class="page-action-bar page-action-bar--narrow" ng-hide="ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
    <label class="gf-form gf-form--grow gf-form--has-input-icon">
      <input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
      <i class="gf-form-input-icon fa fa-search"></i>
    </label>
    <div class="page-action-bar__spacer"></div>
    <a class="btn btn-primary" ng-href="{{ctrl.createDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
      New Dashboard
    </a>
    <a class="btn btn-inverse" href="dashboards/folder/new" ng-if="!ctrl.folderId && ctrl.isEditor">
      New Folder
    </a>
    <a class="btn btn-inverse" href="{{ctrl.importDashboardUrl()}}" ng-if="ctrl.hasEditPermissionInFolders || ctrl.canSave">
      Import
    </a>
  </div>

  <div class="page-action-bar page-action-bar--narrow" ng-show="ctrl.hasFilters">
    <div class="gf-form-inline">
      <div class="gf-form" ng-show="ctrl.query.tag.length > 0">
        <label class="gf-form-label width-4">
          Tags
        </label>
        <div class="gf-form-input gf-form-input--plaintext" ng-show="ctrl.query.tag.length > 0">
          <span ng-repeat="tagName in ctrl.query.tag">
            <a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="tag label label-tag">
              <i class="fa fa-remove"></i>&nbsp;{{tagName}}
            </a>
          </span>
        </div>
      </div>
      <div class="gf-form" ng-show="ctrl.query.starred">
        <label class="gf-form-label">
          <a class="pointer" ng-click="ctrl.removeStarred()">
            <i class="fa fa-fw fa-check"></i> Starred
          </a>
        </label>
      </div>
      <div class="gf-form">
        <label class="gf-form-label">
          <a class="pointer" ng-click="ctrl.clearFilters()" bs-tooltip="'Clear current search query and filters'">
            <i class="fa fa-remove"></i>&nbsp;Clear
          </a>
        </label>
      </div>
    </div>
  </div>

  <div class="search-results" ng-show="ctrl.hasFilters && ctrl.sections.length === 0">
    <em class="muted">
      No dashboards matching your query were found.
    </em>
  </div>

	<div class="search-results" ng-show="!ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
    <em class="muted">
        No dashboards found.
    </em>
  </div>

  <div class="search-results" ng-show="ctrl.sections.length > 0">
    <div class="search-results-filter-row">
      <gf-form-checkbox
        on-change="ctrl.onSelectAllChanged()"
        checked="ctrl.selectAllChecked"
        switch-class="gf-form-checkbox--transparent"
      />
      <div class="search-results-filter-row__filters">
        <div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)">
          <select
            class="search-results-filter-row__filters-item gf-form-input"
            ng-model="ctrl.selectedStarredFilter"
            ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
            ng-change="ctrl.onStarredFilterChange()"
          />
        </div>
        <div class="gf-form-select-wrapper" ng-show="!(ctrl.canMove || ctrl.canDelete)">
          <select
            class="search-results-filter-row__filters-item gf-form-input"
            ng-model="ctrl.selectedTagFilter"
            ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
            ng-change="ctrl.onTagFilterChange()"
          />
        </div>
        <div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete">
          <button	type="button"
            class="btn gf-form-button btn-inverse"
            ng-disabled="!ctrl.canMove"
            ng-click="ctrl.moveTo()"
            bs-tooltip="ctrl.canMove ? '' : 'Select a dashboard to move (cannot move folders)'"
            data-placement="bottom">
          <i class="fa fa-exchange"></i>&nbsp;&nbsp;Move
          </button>
          <button type="button"
            class="btn gf-form-button btn-danger"
            ng-click="ctrl.delete()"
            ng-disabled="!ctrl.canDelete">
            <i class="fa fa-trash"></i>&nbsp;&nbsp;Delete
          </button>
        </div>
      </div>
    </div>
    <div class="search-results-container">
      <dashboard-search-results
        results="ctrl.sections"
        editable="true"
        on-selection-changed="ctrl.selectionChanged()"
        on-tag-selected="ctrl.filterByTag($tag)"
      />
    </div>
  </div>

</div>

<div ng-if="ctrl.canSave && ctrl.folderId && !ctrl.hasFilters && ctrl.sections.length === 0">
  <empty-list-cta model="{
    title: 'This folder doesn\'t have any dashboards yet',
    buttonIcon: 'gicon gicon-dashboard-new',
    buttonLink: 'dashboard/new?folderId={{ctrl.folderId}}',
    buttonTitle: 'Create Dashboard',
    proTip: 'Add/move dashboards to your folder at ->',
    proTipLink: 'dashboards',
    proTipLinkTitle: 'Manage dashboards',
    proTipTarget: ''
  }" />
</div>
